<template>
  <div class="box">
    <div class="ton">
      <b>宏烨找房</b>
    </div>
    <div class="housing">
      <dl @click="xinf">
        <dt>
          <svg
            t="1679442932792"
            class="icon"
            viewBox="0 0 1024 1024"
            version="1.1"
            xmlns="http://www.w3.org/2000/svg"
            p-id="1481"
            width="50"
            height="50"
          >
            <path
              d="M234.666667 490.666667h106.666666a42.666667 42.666667 0 0 0 42.666667-42.666667v-170.666667a42.666667 42.666667 0 0 0-42.666667-42.666666h-106.666666a42.666667 42.666667 0 0 0-42.666667 42.666666v170.666667a42.666667 42.666667 0 0 0 42.666667 42.666667z m0-192a21.333333 21.333333 0 0 1 21.333333-21.333334h64a21.333333 21.333333 0 0 1 21.333333 21.333334v128a21.333333 21.333333 0 0 1-21.333333 21.333333h-64a21.333333 21.333333 0 0 1-21.333333-21.333333z m766.293333 173.866666L533.333333 202.453333V85.333333h21.333334a21.333333 21.333333 0 0 0 0-42.666666H21.333333a21.333333 21.333333 0 1 0 0 42.666666h21.333334v810.666667a85.333333 85.333333 0 0 0 85.333333 85.333333h768a85.333333 85.333333 0 0 0 85.333333-85.333333V510.08a21.333333 21.333333 0 0 0 19.626667-37.546667zM341.333333 938.666667h-106.666666V704a42.666667 42.666667 0 0 1 42.666666-42.666667h21.333334a42.666667 42.666667 0 0 1 42.666666 42.666667z m149.333334 0h-106.666667V704a85.333333 85.333333 0 0 0-85.333333-85.333333h-21.333334a85.333333 85.333333 0 0 0-85.333333 85.333333v234.666667H128a42.666667 42.666667 0 0 1-42.666667-42.666667V85.333333h405.333334z m298.666666 0h-106.666666V704a42.666667 42.666667 0 0 1 42.666666-42.666667h21.333334a42.666667 42.666667 0 0 1 42.666666 42.666667z m149.333334-42.666667a42.666667 42.666667 0 0 1-42.666667 42.666667h-64V704a85.333333 85.333333 0 0 0-85.333333-85.333333h-21.333334a85.333333 85.333333 0 0 0-85.333333 85.333333v234.666667h-106.666667V251.733333l405.333334 234.666667z"
              p-id="1482"
            ></path>
          </svg>
        </dt>
        <dd>新房</dd>
      </dl>
      <dl @click="twohoue">
        <dt>
          <svg
            t="1679442964953"
            class="icon"
            viewBox="0 0 1024 1024"
            version="1.1"
            xmlns="http://www.w3.org/2000/svg"
            p-id="1620"
            width="50"
            height="50"
          >
            <path
              d="M1002.666667 503.253333L557.226667 57.813333a64 64 0 0 0-90.453334 0L298.666667 225.92V106.666667H128v289.92l-106.666667 106.666666A42.666667 42.666667 0 0 0 51.413333 576H128v341.333333a64 64 0 0 0 64 64h640a64 64 0 0 0 64-64V576h76.586667A42.666667 42.666667 0 0 0 1002.666667 503.253333zM170.666667 149.333333h85.333333v119.253334l-85.333333 85.333333z m426.666666 789.333334h-170.666666V597.333333a21.333333 21.333333 0 0 1 21.333333-21.333333h128a21.333333 21.333333 0 0 1 21.333333 21.333333z m256-405.333334v384a21.333333 21.333333 0 0 1-21.333333 21.333334h-192V597.333333a64 64 0 0 0-64-64h-128a64 64 0 0 0-64 64v341.333334H192a21.333333 21.333333 0 0 1-21.333333-21.333334V533.333333H51.413333L128 456.746667l170.666667-170.666667 198.186666-198.186667a21.333333 21.333333 0 0 1 30.08 0L972.586667 533.333333z"
              p-id="1621"
            ></path>
            <path
              d="M512 469.333333a106.666667 106.666667 0 1 1 106.666667-106.666666 106.666667 106.666667 0 0 1-106.666667 106.666666z m0-170.666666a64 64 0 1 0 64 64 64 64 0 0 0-64-64z"
              p-id="1622"
            ></path>
          </svg>
        </dt>
        <dd>二手房</dd>
      </dl>
      <dl @click="rental">
        <dt>
          <svg
            t="1679442684770"
            class="icon"
            viewBox="0 0 1024 1024"
            version="1.1"
            xmlns="http://www.w3.org/2000/svg"
            p-id="5815"
            width="50"
            height="50"
          >
            <path
              d="M909 543.3c12.1 11.5 31.4 10.9 42.8-1.2 11.5-12.1 10.9-31.4-1.2-42.8L537.1 107.6c-12.8-13.9-39.1-13.9-53-0.7L71.9 500.2c-12 11.5-12.5 30.8-0.9 42.8 11.5 12.1 30.8 12.5 42.8 1l53.9-51.4v387.6c-0.4 1-0.9 18.8 9.7 30 6.4 6.7 10.5 9.1 31.4 11.1h120.1c16.7 0 30.3-13.6 30.3-30.3 0-16.7-13.6-30.3-30.3-30.3H228.4V444.6c0-3-0.6-5.8-1.4-8.5l283.4-270.5L909 543.3z"
              p-id="5816"
            ></path>
            <path
              d="M839.6 733.7c24.4-20.1 40-50.6 40-84.7 0-60.5-49.2-109.7-109.7-109.7S660.2 588.5 660.2 649c0 34 15.6 64.5 40 84.7-70.1 27.8-119.8 96.2-119.8 176.1 0 3.4 0.3 6.6 0.5 10H621c-0.2-3.3-0.5-6.6-0.5-10 0-82.5 67.1-149.5 149.5-149.5 82.5 0 149.5 67.1 149.5 149.5 0 3.4-0.3 6.7-0.5 10h39.9c0.2-3.3 0.5-6.6 0.5-10 0-79.8-49.7-148.2-119.8-176.1zM770 718.9c-38.5 0-69.8-31.3-69.8-69.8s31.3-69.8 69.8-69.8 69.8 31.3 69.8 69.8-31.3 69.8-69.8 69.8z"
              p-id="5817"
            ></path>
          </svg>
        </dt>
        <dd>出租房</dd>
      </dl>
      <dl @click="jsq">
        <dt>
          <svg
            t="1679442731741"
            class="icon"
            viewBox="0 0 1024 1024"
            version="1.1"
            xmlns="http://www.w3.org/2000/svg"
            p-id="1077"
            width="50"
            height="50"
          >
            <path
              d="M320 469.333333h-85.333333a42.666667 42.666667 0 0 0-42.666667 42.666667v85.333333a42.666667 42.666667 0 0 0 42.666667 42.666667h85.333333a42.666667 42.666667 0 0 0 42.666667-42.666667v-85.333333a42.666667 42.666667 0 0 0-42.666667-42.666667z m0 128h-85.333333v-85.333333h85.333333zM853.333333 42.666667H170.666667a85.333333 85.333333 0 0 0-85.333334 85.333333v768a85.333333 85.333333 0 0 0 85.333334 85.333333h682.666666a85.333333 85.333333 0 0 0 85.333334-85.333333V128a85.333333 85.333333 0 0 0-85.333334-85.333333z m42.666667 853.333333a42.666667 42.666667 0 0 1-42.666667 42.666667H170.666667a42.666667 42.666667 0 0 1-42.666667-42.666667V128a42.666667 42.666667 0 0 1 42.666667-42.666667h682.666666a42.666667 42.666667 0 0 1 42.666667 42.666667z m-576-192h-85.333333a42.666667 42.666667 0 0 0-42.666667 42.666667v85.333333a42.666667 42.666667 0 0 0 42.666667 42.666667h85.333333a42.666667 42.666667 0 0 0 42.666667-42.666667v-85.333333a42.666667 42.666667 0 0 0-42.666667-42.666667z m0 128h-85.333333v-85.333333h85.333333z m469.333333-362.666667h-85.333333a42.666667 42.666667 0 0 0-42.666667 42.666667v320a42.666667 42.666667 0 0 0 42.666667 42.666667h85.333333a42.666667 42.666667 0 0 0 42.666667-42.666667V512a42.666667 42.666667 0 0 0-42.666667-42.666667z m0 362.666667h-85.333333V512h85.333333zM554.666667 469.333333h-85.333334a42.666667 42.666667 0 0 0-42.666666 42.666667v85.333333a42.666667 42.666667 0 0 0 42.666666 42.666667h85.333334a42.666667 42.666667 0 0 0 42.666666-42.666667v-85.333333a42.666667 42.666667 0 0 0-42.666666-42.666667z m0 128h-85.333334v-85.333333h85.333334z m0 106.666667h-85.333334a42.666667 42.666667 0 0 0-42.666666 42.666667v85.333333a42.666667 42.666667 0 0 0 42.666666 42.666667h85.333334a42.666667 42.666667 0 0 0 42.666666-42.666667v-85.333333a42.666667 42.666667 0 0 0-42.666666-42.666667z m0 128h-85.333334v-85.333333h85.333334zM789.333333 170.666667H234.666667a42.666667 42.666667 0 0 0-42.666667 42.666666v128a42.666667 42.666667 0 0 0 42.666667 42.666667h554.666666a42.666667 42.666667 0 0 0 42.666667-42.666667v-128a42.666667 42.666667 0 0 0-42.666667-42.666666z m0 170.666666H234.666667v-128h554.666666z"
              p-id="1078"
            ></path>
          </svg>
        </dt>
        <dd>房贷计算器</dd>
      </dl>
    </div>
    <div class="xin">
      <h3>新房</h3>
      <div
        class="xinf"
        v-for="(item, index) in stlist"
        :key="index"
        @click="Dali(item)"
      >
        <div class="xinimg">
          <img :src="item.img" alt="" />
        </div>
        <div class="right">
          <div class="p1">
            <span>{{ item.title }}</span>
            <span class="span1">
              {{ item.sale_status }}
            </span>
          </div>
          <p class="p2">
            <span class="span2">{{ item.city }}</span>
            <span class="span3">
              <b>{{ item.price }}</b>
            </span>
          </p>
          <p class="p3">室厅</p>
          <p class="p4">
            <span class="ps1">小户型</span>
            <span class="ps2">低密居所</span>
            <span class="ps3">旅游地产</span>
            <span class="ps4">教育地产</span>
          </p>
        </div>
      </div>
    </div>
    <div class="second">
      <h3>二手房</h3>
      <div
        class="xinf"
        v-for="(item, index) in lilist"
        @click="Delist(item)"
        :key="index"
      >
        <div class="xinimg">
          <img :src="item.img" alt="" />
        </div>
        <div class="right">
          <div class="p1">
            <span>{{ item.title }}</span>
          </div>
          <p class="p2">
            <span class="span2"> {{ item.city }}</span>
            <span class="span3"
              ><b> {{ item.price }}</b></span
            >
          </p>
          <p class="p3">
            {{ item.room }}室{{ item.living_room }}厅{{ item.acreage }}
          </p>
          <p class="p4">
            <span class="ps1">95</span>
            <span class="ps2">96</span>
            <span class="ps3">97</span>
            <span class="ps4">98</span>
          </p>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { getlist, setlist } from "../../api/index";
export default {
  data() {
    return {
      stlist: [],
      lilist: [],
      page: 1,
      size: 10,
    };
  },
  async mounted() {
    let res = await getlist({ page: 1, size: 10 });
    console.log(res.data.data);
    this.stlist = res.data.data.slice(2, 5);

    let rest = await setlist({ page: 1, size: 10 });
    console.log(rest.data.data);
    this.lilist = rest.data.data.slice(2, 5);
  },
  onLoad() {},
  methods: {
    xinf() {
      this.$router.push("/pages/Chamber/Chamber");
    },
    twohoue() {
      this.$router.push("/pages/TwoHome/TwoHome");
    },
    rental() {
      this.$router.push("/pages/hire/hire");
    },
    jsq() {
      this.$router.push("/pages/err/err");
    },
    Delist(item) {
      this.$router.push({
        path: "/pages/Detaileds/Detaileds",
        query: item,
      });
    },
    Dali(item) {
      this.$router.push({
        path: "/pages/Detailed/Detailed",
        query: item,
      });
    },
  },
};
</script>

<style>
.box {
  width: 100%;
  height: 100%;
}
.ton {
  width: 100%;
  height: 10%;
  background-color: blue;
  font-size: 30px;
  line-height: 80px;
  text-align: center;
  color: #fff;
}
.housing {
  display: flex;
  justify-content: space-around;
  margin-top: 20px;
}
.housing dl {
  text-align: center;
}
.xin {
  width: 100%;
}
.xin h3 {
  margin-top: 15px;
  margin-left: 20px;
}
.second h3 {
  margin-top: 15px;
  margin-left: 20px;
}
.xinf {
  width: 95%;
  height: 100px;
  display: flex;
  justify-content: flex-end;
  margin-top: 20px;
}
.xinimg {
  width: 30%;
  height: 100px;
}
.xinimg img {
  width: 100%;
  height: 90px;
}
.right {
  width: 55%;
  margin-left: 5%;
  height: 200px;
}
.span1 {
  background: rgb(61, 202, 32);
  padding: 3px;
  margin: 0px 5px;
  color: #fff;
}
.p1 {
  font-size: 12px;
}
.p2 {
  display: flex;
  justify-content: space-between;
}
.span2 {
  font-size: 12px;
  color: rgb(178, 176, 176);
}
.span3 {
  color: rgb(42, 183, 56);
}
.p3 {
  font-size: 12px;
  color: rgb(178, 176, 176);
}
.p4 {
  display: flex;
  flex-wrap: wrap;
}
.p4 span {
  font-size: 12px;
  padding: 2px;
  margin: 3px;
}
.ps1 {
  background: #ffebef;
  color: #e24546;
}
.ps2 {
  background: #e8eaf6;
  color: #6a79d5;
}
.ps3 {
  background: #e0f7fa;
  color: #4f9859;
}
.ps4 {
  background: #e0f8fa;
  color: #579ca5;
}
</style>
